<template>
  <div class="list-wrapper">
    <div class="list-icon"></div>
    <div class="city-list">
      <h1>{{ title }}</h1>
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "List",
  props: {
    title: String,
    list: Array
  }
};
</script>
<style lang="scss" scoped>
.list-wrapper {
  padding: 0.5em;
  width: 30%;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  .list-icon {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 80px;
    border: 1px solid #eaeaea;
    border-radius: 50%;
  }
  .city-list {
    width: 14em;
    margin-left: 1em;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    h1 {
      color: #8c2;
      font-size: 1rem;
    }
    li {
      padding: 1em 1em 1em 0;
      float: left;
      font-size: 0.8rem;
    }
  }
}
</style>
